<template>
  <div class="p-2">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-card class="box-card">
          <el-descriptions
            class="margin-top"
            title="基本信息"
            :column="3"
            :size="size"
            border
          >
            <template #extra>
              <el-row :gutter="10">
                <el-col :span="1.5">
                  <el-button type="primary" @click="handleResetPwd">修改密碼</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button type="success" @click="handleSecurity">安全设置</el-button>
                </el-col>
              </el-row>
            </template>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  店铺ID
                </div>
              </template>
              {{ shop.id }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  店铺名称
                </div>
              </template>
              {{ shop.shopName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <pear />
                  </el-icon>
                  登录名称
                </div>
              </template>
              {{ shop.loginName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <location />
                  </el-icon>
                  归属商户
                </div>
              </template>
              {{ shop.merName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <tickets />
                  </el-icon>
                  状态
                </div>
              </template>
              <dict-tag :options="sys_normal_disable" :value="shop.status" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <office-building />
                  </el-icon>
                  邮箱地址
                </div>
              </template>
              {{ shop.email }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span><strong>财务信息</strong></span>
              <el-table
                :data="accounts"
                ref="tableRef">
                <el-table-column label="账号类型" align="center" prop="accType" width="100" />
                <el-table-column label="账号余额" align="center" prop="balance">
                  <template #default="scope">
                    <span>{{ scope.row.balance/100 }} </span>
                  </template>
                </el-table-column>
                <el-table-column label="冻结金额" align="center" prop="frozeAmount">
                  <template #default="scope">
                    <span>{{ scope.row.frozeAmount/100 }} </span>
                  </template>
                  <template v-slot:header>
                    冻结金额
                    <el-popover placement="top-start"  effect="dark" :width="180" trigger="hover" content="押金或异常订单冻结金额">
                      <template #reference>
                        <el-icon>
                          <QuestionFilled />
                        </el-icon>
                      </template>
                    </el-popover>
                  </template>
                </el-table-column>

                <el-table-column label="状态" align="center" prop="status">
                  <template #default="scope">
                    <span>
                      <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-card class="box-card">
          <template v-slot:header>
            <div class="clearfix">
              <span><strong>收益信息</strong></span>
              <el-table
                :data="ratios"
                ref="tableRef">
                <el-table-column label="支付名称" align="center" prop="paymentWayName" width="100" />
                <el-table-column label="支付编码" align="center" prop="paymentWay" />
                <el-table-column label="最小金额" align="center" prop="minAmount">
                  <template #default="scope">
                    <span>{{ scope.row.minAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="最大金额" align="center" prop="maxAmount">
                  <template #default="scope">
                    <span>{{ scope.row.maxAmount }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="收益率" align="center" prop="earningRate">
                  <template #default="scope">
                    <span>{{ scope.row.earningRate }} %</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" align="center" prop="status">
                  <template #default="scope">
                    <span>
                      <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :title="securityDialog.title" v-model="securityDialog.visible" width="500px" append-to-body>
      <el-card>
        <el-skeleton :loading="loading" animated>
          <el-form v-model="securityForm" ref="securityFormRef" label-width="100px">
            <el-form-item label="Google密钥" prop="oldPassword">
              <canvas id="canvas" ref="canvasRef" />
            </el-form-item>
            <el-form-item label="谷歌验证码" prop="oldPassword">
              <el-input v-model="securityForm.googleAuthCode" placeholder="请输入谷歌驗證碼" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="登录方式" prop="oldPassword">
              <el-radio-group v-model="securityForm.loginType" size="small">
                <el-radio key="1" label="1" border>仅密码</el-radio>
                <el-radio key="3" label="3" border>密码+谷歌验证码</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit">保存</el-button>
            </el-form-item>
          </el-form>
        </el-skeleton>
        <!--<el-row>
          <el-link type="primary">{{ qrCodeContent }}</el-link>
        </el-row>-->
      </el-card>
    </el-dialog>

    <el-dialog :title="resetPwdDialog.title" v-model="resetPwdDialog.visible" width="360px" append-to-body>
      <el-card>
        <resetPwd :from="0"/>
      </el-card>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { getAccountList } from "@/api/shop/account";
import { getInfo, getProfitConfig } from "@/api/shop/info";

import { ShopVO } from '@/api/retail/shop/types';
import { AccountVO } from '@/api/retail/account/types';
import {Pear, QuestionFilled} from "@element-plus/icons-vue";
import {ProfitRatioVO} from "@/api/retail/profitRatio/types";
import ResetPwd from "@/views/system/user/profile/resetPwd.vue";
import request from "@/utils/request";
import {getGoogleAuthQrcode} from "@/api/security";
import qrcode from "qrcode";

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
const shop = ref<ShopVO>({
  id: '',
  shopName: '',
  loginName: '',
  merId: '',
  merName: '',
  email: '',
  status: ''
});
const securityFormRef = ref<ElFormInstance>();
const securityForm = ref({
  loginType: '',
  googleAuthCode: '',
  googleAuthSecret: ''
});
const size = ref('')
const loading = ref(true)
const buttonLoading = ref(false);
const ratios = ref<ProfitRatioVO[]>([]);
const accounts = ref<AccountVO[]>([]);
const iconStyle = computed(() => {
  return {
    marginRight: "6px",
  }
})
const resetPwdDialog = reactive<DialogOption>({
  visible: false,
  title: '修改密码'
});
const securityDialog = reactive<DialogOption>({
  visible: false,
  title: '安全设置'
});
const getShopInfo = async () => {
  const res = await getInfo();
  if(res.code==200 && res.data.id) {
    Object.assign(shop.value, res.data);
    // 加载店铺的配置信息
    await getShopProfitSetting();
    // 加載店鋪的賬號信息
    await getAccounts();
  }
}

const getAccounts = async () => {
  const res = await getAccountList();
  // accounts.value.concat(res.data);
  for(const index in res.data) {
    let account = res.data[index];
    accounts.value.push(account);
  }
}

const getShopProfitSetting = async () => {
  const res = await getProfitConfig(shop.value.id);
  // ratios.value.concat(res.data);
  for(const index in res.data) {
    let ratio = res.data[index];
    ratios.value.push(ratio);
  }
}

const handleSecurity = async () => {
  securityDialog.visible = true;
  let canvas = undefined;
  const res = await getGoogleAuthQrcode();
  loading.value = false;
  securityForm.value.loginType = res.data.loginType;
  await nextTick(() => {
    canvas = document.getElementById('canvas');
  });
  if(canvas){
    await qrcode.toCanvas(canvas, res.data.qrcode);
  }
}

const handleResetPwd = async () => {
  resetPwdDialog.visible = true;
}

const handleSubmit = async () => {
  buttonLoading.value = true;
  const res = await request({
    url: '/account/security/google_bind',
    method: 'post',
    data: securityForm.value
  }).finally(() => {
    buttonLoading.value = false;
  });
  if(res.code==200) {
    securityDialog.visible = false;
    securityFormRef.value?.resetFields();
    proxy?.$modal.msgSuccess("设置成功");
  }else {
    proxy?.$modal.msgSuccess("设置失败:"+res.msg);
  }
}

onMounted(() => {
  getShopInfo();
})
</script>
